<template>
  <div class="app-container">

    <!-- 问题信息显示卡片 -->
    <el-card class="box-card">
      <template #header>
        <el-text size="large" weight="bold">问题信息</el-text>
      </template>
      <el-descriptions title="基本信息" :column="2" border class="margin-top">
        <!-- 用户名 -->
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon style="margin: 6px">
                <User />
              </el-icon>
              用户名
            </div>
          </template>
          {{ issueRef.userName || '暂无' }}
        </el-descriptions-item>

        <!-- 电话号 -->
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon style="margin: 6px">
                <Iphone />
              </el-icon>
              电话号
            </div>
          </template>
          {{ issueRef.phoneNum || '暂无' }}
        </el-descriptions-item>

        <!-- 类型 -->
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon style="margin: 6px">
                <Tickets />
              </el-icon>
              类型
            </div>
          </template>
          <el-tag>{{ issueRef.typeName || '无类型' }}</el-tag>
        </el-descriptions-item>

        <!-- 学校 -->
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon style="margin: 6px">
                <School />
              </el-icon>
              学校
            </div>
          </template>
          {{ issueRef.schoolName || '暂无' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 问题详情 -->
      <el-divider />
      <el-descriptions title="内容" :column="1" border class="margin-top">
        <el-descriptions-item label="标题">
          {{ issueRef.issueTitle || '无标题' }}
        </el-descriptions-item>
        <el-descriptions-item label="内容">
          <el-input v-model="issueRef.issueContent" type="textarea" :rows="5" readonly />
        </el-descriptions-item>
        <el-descriptions-item label="图片列表">
          <ImageList :images="issueRef.issueImages" :image-width="100" :image-height="100" v-if="issueRef.issueImages" />
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 反馈信息表单 -->
    <el-card class="box-card">
      <el-form :model="form" ref="feedbackRef" :rules="rules" label-width="120px">
        <!-- 反馈内容 -->
        <div class="feedback-fields">
          <el-form-item label="反馈内容" prop="feedbackContent">
            <editor v-model="form.feedbackContent" :min-height="192" />
          </el-form-item>

          <!-- 反馈图片 -->
          <el-form-item label="反馈图片列表" prop="feedbackImages">
            <ImageUpload v-model="form.feedbackImages" :limit="4" />
          </el-form-item>
        </div>
      </el-form>

      <!-- 操作按钮 -->
      <template #footer>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { getIssue} from "@/api/system/issue";
import ImageUpload from "@/components/ImageUpload/index.vue";
import ImageList from "@/components/ImageList/index.vue";
import { User, Iphone, Tickets, School } from "@element-plus/icons-vue";
import {addFeedback} from "@/api/system/feedback.js";

const { proxy } = getCurrentInstance();
const router = useRoute();
const issueId = ref(null);

// 初始化问题信息
const issueRef = reactive({
  issueTitle: "",
  issueContent: "",
  issueImages: null,
  userName: "",
  schoolName: "",
  typeName: "",
  phoneNum: "",
});

// 表单数据与校验规则
const data = reactive({
  form: {
    issueId: null,
    feedbackContent: null,
    feedbackImages: null,
  },
  rules: {
    feedbackContent: [
      { required: true, message: "反馈内容不能为空", trigger: "blur" },
    ],
  },
});

const { form, rules } = toRefs(data);

// 获取问题信息
function getIssueId() {
  issueId.value = router.params.issueId;
  form.value.issueId = issueId.value;
  getIssue(issueId.value)
      .then((response) => {
        Object.assign(issueRef, response.data);
      })
      .catch((error) => {
        console.error("加载问题信息失败：", error);
        Object.assign(issueRef, {
          issueTitle: "加载失败",
          issueContent: "加载失败",
        });
      });
}

// 提交反馈信息
function submitForm() {
  proxy.$refs.feedbackRef.validate((valid) => {
    if (valid) {
      // 弹出确认框
      proxy.$confirm(
          "是否确定提交反馈信息？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      )
          .then(() => {
            // 用户点击确定后执行提交逻辑
            addFeedback(form.value)
                .then(() => {
                  proxy.$modal.msgSuccess("新增成功");
                  handleClose(true); // 提交成功后关闭页面
                })
                .catch((error) => {
                  console.error("提交反馈失败：", error);
                  proxy.$modal.msgError("提交失败，请重试");
                });
          })
          .catch(() => {
            // 用户点击取消后的回调
            proxy.$modal.msgInfo("已取消提交");
          });
    }
  });
}


function handleClose(refresh = false) {
  const obj = { path: "/issue" };

  if (refresh) {
    // 重新导航到问题列表页面以触发刷新
    proxy.$router.replace({
      path: "/redirect" + obj.path, // 使用重定向路由刷新数据
    });
  } else {
    proxy.$tab.closeOpenPage(obj);
  }
}


// 初始化加载问题信息
getIssueId();
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.margin-top {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}
</style>
